import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";

import Movies from "../pages/Movies.vue";
import Videos from "../pages/Videos.vue";
import Mine from "../pages/Mine.vue";
import Detail from "../pages/Detail.vue";
import DetailChild from "../pages/DetailChild.vue";
import NotFound from "../pages/NotFound.vue";

import Hot from "../pages/Hot.vue";
import Cinema from "../pages/Cinema.vue";

import Users from "../pages/Users.vue";

import Other1 from "../pages/Other1.vue";
import Other2 from "../pages/Other2.vue";

const router = createRouter({
  // 表示使用hash模式的路由
  // history: createWebHistory(import.meta.env.BASE_URL),
  history: createWebHashHistory(),
  routes: [
    {
      // 路由重定向
      path: "/",
      redirect: "/movies",
    },
    {
      path: "/movies",
      component: Movies,
      // children表示嵌套的路由, 结构和外层是相同的
      // strict: true,
      children: [
        {
          path: "/movies",
          redirect: "/movies/hot",
        },
        {
          // path如果不加"/", 就表示在上一级的路由的地址后面去拼接
          // hot就相当于是/movies/hot
          path: "hot",
          // 别名
          alias: "hott",
          component: Hot,
        },
        {
          path: "cinema",
          component: Cinema,
        },
      ],
    },
    {
      path: "/videos",
      component: Videos,
    },
    {
      path: "/mine",
      component: Mine,
      name: "mine",
    },
    {
      // vue的路由默认用的是精准匹配
      // :id就表示动态路由
      // (\\d+)表示数字
      // 后面的?表示可选参数
      path: "/detail/:id(\\d+)?",
      component: Detail,
      name: "detail",
      props: true,
      // children: [
      //   {
      //     path: "",
      //     component: DetailChild,
      //     name: "child",
      //   },
      // ],
    },
    {
      path: "/users/:userid+",
      component: Users,
    },
    {
      path: "/other",
      // 命名视图
      // 同时显示多个页面，要加s复数
      components: {
        other1: Other1,
        abc: Other2,
      },
    },
    {
      // 表示404路由, 如果其他的路由都没有匹配到，那么就显示404页面
      path: "/:pathMatch(.*)*",
      component: NotFound,
      // redirect: "/movies",
    },
  ],
});

export default router;
